{% macro edit_parameter_form() -%}
  <form novalidate class="oppia-form" name="newParameterForm" ng-submit="commitParamChange(activeItem)">
    Select a parameter to change:

    <select2-dropdown item="tmpParamChange.name" choices="paramNameChoices" placeholder="Choose or type new" new-choice-regex="^[A-Za-z]+$" width="180px">
    </select2-dropdown>
    
    <span ng-show="tmpParamChange.name">
      <select ng-model="tmpParamChange.generator_id"
              ng-options="key as PREAMBLE_TEXT[key] for (key, value) in ALLOWED_KEYS"
              style="width: 220px;" required>
      </select>

      <value-generator-editor generator-id="tmpParamChange.generator_id"
                              customization-args="tmpParamChange.customization_args"
                              obj-type="getObjTypeForParam(tmpParamChange.select2Name.text) || 'UnicodeString'">
      </value-generator-editor>
    </span>
    <br>

    <input type="submit" value="Close editor">
  </form>
{%- endmacro %}


<div class="container-fluid">
  <div ng-if="paramChanges.length === 0">
    <div class="row-fluid">
      <div class="span9">
        <em>No parameter changes have been defined.</em>
      </div>
      <div class="span3"></div>
    </div>
  </div>

  <div ng-repeat="param in paramChanges">
    <div class="row-fluid">
      <div class="span1">
        <[$index + 1]>.
      </div>
      <div class="span8">
        <span ng-if="activeItem !== $index">
          Change <b><[param.name]></b> <[HUMAN_READABLE_ARGS_RENDERERS[param.generator_id](param.customization_args)]>
        </span>

        <div ng-if="activeItem === $index">
          {{ edit_parameter_form() }}
        </div>
      </div>

      <div class="span3">
        <span class="pull-right">
          <button type="button" ng-disabled="activeItem !== -1" ng-click="startEditParamChange($index)">
            Edit
          </button>
          <button type="button" ng-disabled="activeItem !== -1" ng-click="deleteParamChange($index)">
            &times;
          </button>
        </span>
      </div>
    </div>
  </div>

  <div class="row-fluid">
    <div class="span9"></div>

    <div class="span3">
      <button type="button" ng-disabled="activeItem !== -1" ng-click="startAddParamChange()" class="pull-right">
        Add new
      </a>
    </div>
  </div>
</div>
